<tem<template>
  <view class="search-container">
    <view @click="goHome">
      <u-icon name="arrow-left" size="30" color="#888" />
    </view>
    <u-search 
      v-model="searchQuery" 
      placeholder="请输入搜索内容" 
      @search="handleSearch" 
      @clear="handleClear"
      :show-action="true" 
    >
    </u-search>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '', // 绑定到搜索框的搜索内容
      updateData: null, // 用于存储搜索结果的数据
    };
  },
  methods: {
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    handleSearch() {
      // 处理搜索逻辑
      console.log('搜索被触发');
      this.searchData(); // 调用搜索方法
    },
    searchData() {
      // 这里添加您的搜索逻辑
      // 例如调用API获取数据
      uni.request({
        url: '/api/search?query=' + this.searchQuery,
        method: 'GET',
        success: (response) => {
          // 处理返回的数据
          console.log(response.data);
          // 更新页面数据
          this.updateData = response.data;
        },
        fail: (error) => {
          console.error('搜索数据请求失败：', error);
        }
      });
    },
    handleClear() {
      // 处理清除逻辑
      this.searchQuery = '';
      console.log('清除被触发');
    }
  }
};
</script>

<style>
.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.u-search {
  width: 70%; /* 根据需要调整搜索框的宽度 */
}
</style>